<script lang="ts">
export default {
  name: "DeviceRecordEntityTable"
}
</script>

<template>
  <!-- 数据表单 -->
  <el-table
    ref="dataTableRef"
    :data="dataState.entityList"
    border
    highlight-current-row
    @selection-change="handleSelectionChange"
    @row-click="handleRowClick"
  >
    <el-table-column align="center" type="selection" width="40"/>
    <el-table-column align="center" label="ID" prop="id" width="80"/>
    <el-table-column label="设备名称" min-width="200" prop="deviceName"/>
    <el-table-column label="设备厂商" min-width="180" prop="manufacturer"/>
    <el-table-column label="设备类型" min-width="140" prop="deviceType"/>
    <el-table-column label="指标名称" min-width="140" prop="metricName"/>
    <el-table-column label="设备数值" prop="deviceValue" type="expand" width="100">
      <template #default="props">
        <el-input v-model="props.row.deviceValueJson" :autosize="{ minRows: 1, maxRows: 100 }" :readonly="true"
                  type="textarea"/>
      </template>
    </el-table-column>
    <el-table-column :formatter="formatDate4elTableColumn" align="center" label="创建时间" prop="createTime" width="180"/>
  </el-table>

  <!-- 简易分页组件 -->
  <DeviceRecordPagination
    :current-page="dataState.currentPage"
    :has-next-page="dataState.hasNextPage"
    @page-change="onPageChange"
  />

  <!-- 分页工具条
  <pagination v-if="total > 0" v-model:limit="queryParams.pageSize" v-model:page="queryParams.pageNum" :total="total"
              @pagination="handleQuery"/>
               -->
</template>

<script lang="ts" setup>
import DeviceRecordPagination from './DeviceRecordPagination.vue';

import {onMounted, reactive} from "vue";

import {
  DeviceRecordItem,
  DeviceRecordQueryParam
} from "@/api/device/sequence-record/types";
import {
  listDeviceRecordEntityPages,
} from "@/api/device/sequence-record";
import {formatDate4elTableColumn,} from '@/utils/formatter';

const emit = defineEmits(['update', 'delete']);// 定义组件的事件通知

/**
 * 对外声明接口：父页面可以调用它
 */
defineExpose({refreshTable});

// 数据状态：定义
let dataState = reactive({
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as any,
  // 实体数据
  entityList: [] as DeviceRecordItem[],

  previousTime: [] as any,
  currentTime: 0 as any,
  currentPage: 1,
  hasNextPage: true,
});

function handleSelectionChange(row: any) {
}

function handleRowClick(row: any) {
}

async function onPageChange(param: any) {
  let queryParam = {} as any
  queryParam.deviceName = dataState.queryParams.deviceName;
  queryParam.metricName = dataState.queryParams.metricName;
  queryParam.pageSize = dataState.queryParams.pageSize;

  if (param == 'next' && dataState.entityList.length > 0) {
    queryParam.recordTime = dataState.entityList[dataState.entityList.length - 1].createTime
  }
  if (param == 'prev') {
    queryParam.recordTime = dataState.previousTime[dataState.currentPage - 3]
  }

  await handleQuery(queryParam)

  if (param == 'next') {
    dataState.currentPage += 1;

    if (dataState.previousTime.length == 0) {
      dataState.previousTime.push(queryParam.recordTime)
    }

    let recordTime = dataState.entityList[dataState.entityList.length - 1].createTime
    dataState.previousTime.push(recordTime)
  }
  if (param == 'prev') {
    dataState.currentPage -= 1;
    dataState.previousTime.splice(dataState.currentPage)
  }

}


/**
 * 刷新页面信息
 */
async function handleQuery(queryParam: any) {
  dataState.entityList = [];
  await listDeviceRecordEntityPages(queryParam).then(({data}) => {
    data.list.forEach(value => {
      let item = value;
      item.deviceValueJson = JSON.stringify(value.deviceValue, null, 5);
      dataState.entityList.push(item)
    });

    dataState.hasNextPage = dataState.entityList.length == queryParam.pageSize;
  });
}


/**
 * 刷新表单
 */
function refreshTable(queryParams: DeviceRecordQueryParam) {
  dataState.currentPage = 1
  dataState.hasNextPage = true
  dataState.currentTime = 0
  dataState.previousTime = [] as any

  dataState.queryParams = queryParams;
  if (dataState.queryParams.deviceName === '') {
    dataState.queryParams.deviceName = undefined;
  }
  if (dataState.queryParams.metricName === '') {
    dataState.queryParams.metricName = undefined;
  }

  let queryParam = {} as any
  queryParam.deviceName = dataState.queryParams.deviceName;
  queryParam.metricName = dataState.queryParams.metricName;
  queryParam.pageSize = dataState.queryParams.pageSize;

  if (dataState.queryParams.datetime !== undefined) {
    let dateObject = new Date(dataState.queryParams.datetime);
    queryParam.recordTime = dateObject.getTime();
  }

  handleQuery(queryParam);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
  let queryParam = {} as any
  queryParam.pageSize = dataState.queryParams.pageSize;
  handleQuery(queryParam);
});

</script>
